<template>
	<div class="listItem" @tap="tabbarTap">
		<img v-if="!tabbar.common.labelsOnly && !link.skinIcon" :src="imgSrc" :style="imgStyle" />
		<div v-if="!tabbar.common.labelsOnly && link.skinIcon" :style="iconStyle"></div>
		<div v-if="!tabbar.common.iconsOnly" :style="labelStyle">{{ link.label }}</div>
		<div v-if="link.badge > 0" :style="badgeStyle" :class="{ long: link.badge.length > 1 }" class="myBadge">{{ link.badge }}</div>
	</div>
</template>

<script>
	export default {
		props:{
			link: Object,
			index: Number,
			tabbar: Object
		},
		computed:{
			badgeStyle() {
				return 'color:' + this.tabbar.common.badgeTextColor + ';background-color:' + this.tabbar.common.badgeColor + ';'
			},
			imgSrc(){
				return this.tabbar.common.originSelectIndex === this.index ? this.link.SelectImgUrl : this.link.imgUrl
			},
			labelStyle(){
				return 'font-size:' + this.labelFontSize + 'rpx;height:40rpx;line-height:40rpx;color:' + this.labelColor
			},
			labelFontSize() {
				return this.tabbar.common.labelsOnly ? 32 : 24
			},
			labelColor() {
				return this.tabbar.common.originSelectIndex === this.index ? this.tabbar.common.highlightTextColor : this.tabbar.common.originTextColor
			},
			imgStyle() {
				return 'width:' + this.imgSize + 'rpx;height:' + this.imgSize + 'rpx;'
			},
			imgSize() {
				return this.tabbar.common.iconsOnly ? 76 : 48
			},
			iconStyle() {
				return this.imgStyle + 'background-image:url(' + this.$skinUrl + ');' +
					'background-size:' +
					this.$skinW * this.iconRatio1 +
					'rpx ' +
					this.$skinH * this.iconRatio2 +
					'rpx;' +
					'background-position:' +
					this.iconLeft +
					'rpx ' +
					this.iconTop +
					'rpx;';
			},
			iconParam() {
				return this.tabbar.common.originSelectIndex === this.index ? this.link.selectSkin : this.link.originSkin
			},
			iconRatio1() {
				var iconW = 1;
				var icon = this.$icons[this.iconParam]
				if(icon){
					iconW = icon.width
				}
				return this.imgSize / iconW
			},
			iconRatio2() {
				var iconH = 1;
				var icon = this.$icons[this.iconParam]
				if(icon){
					iconH = icon.height
				}
				return this.imgSize / iconH
			},
			iconLeft() {
				var iconX = 0;
				var icon = this.$icons[this.iconParam]
				if(icon){
					iconX = icon.x
				}
				return -iconX * this.iconRatio1
			},
			iconTop() {
				var iconY = 0;
				var icon = this.$icons[this.iconParam]
				if(icon){
					iconY = icon.y
				}
				return -iconY * this.iconRatio2
			},
		},
		methods:{
			tabbarTap(){
				this.$emit('tabbarTap',this.index, this.link.pageId)
			}
		}
	}
</script>

<style lang="less" scoped>
	.listItem {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		&:active {
			background-color: rgba(200, 200, 200, 0.2);
		}
		.myBadge {
			min-width: 30rpx;
			height: 30rpx;
			font-size: 24rpx;
			line-height: 30rpx;
			text-align: center;
			border-radius: 30rpx;
			transform: scale(0.8);
			position: absolute;
			left: 50%;
			top: 4rpx;
			&.long {
				padding: 0 8rpx;
			}
		}
	}
</style>
